<template>
  <div id="app">
     <span class="count" @click="add">{{count}}</span> <br>
     <strong>{{fullName}}</strong>
  </div>
</template>

<script>
  export default {
    name: 'App',
    methods:{
      add(){
        // 提交mutation
        // this.$store.commit("add",2)

        //转发action
        this.$store.dispatch("add",3)
      }
    },
    computed:{
      count(){
        return this.$store.state.count
      },
      fullName(){
        return this.$store.getters.fullName
      }
    }
  }
</script>

<style scoped>
  .count{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: pink;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
    border-radius: 50%;
  }
</style>
